{% extends "myapp/hat.html" %}
{% load static %}
{% block content %}

<script src="https://use.fontawesome.com/27c34d562b.js"></script>

<link href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap4.min.css" rel="stylesheet">

<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="{%  static 'myapp/css/bootstrap-treefy.css' %}"/>
<link rel="stylesheet" href="{%  static 'myapp/css/dhtmlxgantt.css' %}"/>
<script src="{%  static 'myapp/js/bootstrap-treefy.js' %}"></script>

<script src="{%  static 'myapp/js/javascript.js' %}"></script>

<style>

table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
  bottom: .5em;
}

</style>

{#<script src="{% static 'celery_progress/celery_progress.js' %}"></script>#}
<!--<div class="d-flex justify-content-center" id="load">-->
<!--<div class="order-4 p-2" id="wrap"></div>-->
<!--</div>-->
<!--    <script>$(function(){-->
<!--$('a').click(function(){-->
<!--     $('<div class="spinner-border" role="status"></div>')-->
<!--         .prependTo("#wrap");-->
<!--  });-->
<!--});</script>-->
{#    <div class='progress-wrapper'>#}
{#        <div id='progress-bar' class='progress-bar' style="background-color: #68a9ef; width: 0%;">&nbsp;</div>#}
{#      </div>#}
{#      <div id="progress-bar-message">Waiting for progress to start...</div>#}
{#      <script src="{% static 'celery_progress/celery_progress.js' %}"></script>#}
{#      <script>#}
{#      var progressUrl = "{% url 'celery_progress:task_status' task_id %}";#}
{##}
{#      function customResult(resultElement, result) {#}
{#        $( resultElement ).append(#}
{#           $('<p>').text('Sum of all seconds is ' + result)#}
{#        );#}
{#      }#}
{##}
{##}
{#      CeleryProgressBar.initProgressBar(progressUrl, {#}
{#            onResult: customResult,#}
{#      })#}
{##}
{#    </script>#}
{##}
{#    <div class='progress-wrapper'>#}
{#  <div id='progress-bar' class='progress-bar' style="background-color: #68a9ef; width: 0%;">&nbsp;</div>#}
{#</div>#}
{#<div id="progress-bar-message">Waiting for progress to start...</div>#}

{% regroup myJson by wbs1 as myList %}

<table class="table table-striped" id="table">
  <thead>
    <tr>
            <th data-field="wbs1" scope="col">wbs1</th>
            <th data-field="wbs2" scope="col">wbs2</th>
            <th data-field="wbs3_id" scope="col">wbs3_id</th>
            <th data-field="wbs3" scope="col">wbs3</th>
            <th data-field="name" scope="col">name</th>
            <th data-field="value" scope="col">value</th>
            <th data-field="wbs" scope="col">wbs</th>
    </tr>
  </thead>
  <tbody>
  {% with i=0 %}

  {% for grouper, el in myList %}
      <tr data-node="treetable-{{ grouper }}">
      <td>{{ grouper }}</td>
          <td style="visibility: hidden">{{ grouper }}</td><td style="visibility: hidden">{{ el.0.wbs3_id }}</td><td style="visibility: hidden">{{ el.0.wbs3 }}</td>
          <td style="visibility: hidden">{{ grouper }}</td><td style="visibility: hidden">{{ grouper }}</td><td style="visibility: hidden">{{ grouper }}</td>
      </tr>


  {% for subel in el %}
<tr data-node="treetable-{{ subel.wbs3_id }}" data-pnode="treetable-parent-{{ grouper }}">

  {% for subk, subv in subel.items %}
            <td>{{ subv }}</td>


        {% endfor %}

  </tr>
{% endfor %}
  {% endfor %}
  {% endwith %}
  </tbody>
</table>

<script>
$(document).ready(function () {
  $('#table').DataTable();
  $('.dataTables_length').addClass('bs-select');
});
</script>

<script>$("#table").treeFy({

// Custom template
expanderTemplate: '<span class="treetable-expander"></span>',
indentTemplate: '<span class="treetable-indent"></span>',

// CSS classes for expander
expanderExpandedClass: 'fa fa-angle-down',
expanderCollapsedClass: 'fa fa-angle-right',

// Index of the column which expander should be added to.
treeColumn: 0,

// Initial CSS class
initStatusClass: 'treetable-expanded'

});
</script>



{% endblock %}